<template>
	<div class="modal-container" v-show="modalShow">
	  <div class="modal">
			<div class="title">{{title}}</div>
			<div class="options">
				<div class="no" @click="no">否</div>
				<div class="yes" @click="yes">是</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Modal',
    props: ['modalShow'],    
		data: function () {
			return {				
        title: '解绑订单'
			}
		},
		methods: {
			yes: function () {
				this.$emit('continue')
			},
			no: function () {
				// todo
        this.$emit('modalHide')
			}
		}
	}
</script>
<style lang="less">
  @start: #c2b8fd;
  @end: #6fcdff;
  .modal-container {
    z-index: 3;
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	background-color: rgba(0,0,0,.3);

  	.modal {
  		overflow: hidden;
  		background: white;
  		border-radius: 6px;
  		width: 54%;
  		margin: 240px auto;
  		text-align: center;
  		.title {
  			color: white;
  			font-size: 16px;
  			padding: 6px 0;
  			background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@start), to(@end));
  		}
  		.options {
  			display: flex;
  			justify-content: space-around;
  			>div {
  				flex-grow: 1;
  				padding: 10px 0;
  			}
  			>div:nth-child(1) {
  				border-right: 1px solid #eee;
  			}
  		}  		
  	}
  }
</style>